import React from 'react';
import {Card,Button,Tabs,message,Icon} from 'antd';
import './ui.less';
import CollapsePanel from '../../../node_modules/antd/lib/collapse/CollapsePanel';
const TabPane=Tabs.TabPane;

export default class Tab extends React.Component{
  newTabIndex=0
  
  callback=(key)=>{
    message.info('Hi,您选择了页签'+key)
  }

  componentWillMount(){
    const panes=[{
      title:'Tab 1',
      content:'这是一个动态生成的tab标签1',
      key:'1'
    },{
      title:'Tab 2',
      content:'这是一个动态生成的tab标签2',
      key:'2'
    },{
      title:'Tab 3',
      content:'这是一个动态生成的tab标签3',
      key:'3'
    }]
    this.setState({
      panes
    });

  }
  onChanges=(activeKey)=>{
    this.setState({
      activeKey
    })
  }

  onEdit=(targetKey,action)=>{
    this[action](targetKey);
  }

  add = () => {
    const panes = this.state.panes;
    const activeKey = `newTab${this.newTabIndex++}`;
    panes.push({ title: 'New Tab', content: 'Content of new Tab', key: activeKey });
    this.setState({ panes, activeKey });
  }

  remove = (targetKey) => {
    let activeKey = this.state.activeKey;
    let lastIndex;
    this.state.panes.forEach((pane, i) => {
      if (pane.key === targetKey) {
        lastIndex = i - 1;
      }
    });
    const panes = this.state.panes.filter(pane => pane.key !== targetKey);
    if (lastIndex >= 0 && activeKey === targetKey) {
      activeKey = panes[lastIndex].key;
    }
    this.setState({ panes, activeKey });
  }

  render(){
    return (
      <div>
        <Card title="tab页签" className="card_wrapper">
          <Tabs defaultActiveKey="1" onChange={this.callback}>
            <TabPane tab="Tab 1" key="1">Content of Tab Pane 1</TabPane>
            <TabPane tab="Tab 2" key="2">Content of Tab Pane 2</TabPane>
            <TabPane tab="Tab 3" key="3">Content of Tab Pane 3</TabPane>
          </Tabs>
        </Card>
        <Card title="tab带图的页签" className="card_wrapper">
          <Tabs defaultActiveKey="1" onChange={this.callback}>
            <TabPane tab={<span><Icon type="plus"></Icon>Tab 1</span>} key="1">Content of Tab Pane 1</TabPane>
            <TabPane tab={<span><Icon type="edit"></Icon>Tab 2</span>} key="2">Content of Tab Pane 2</TabPane>
            <TabPane tab={<span><Icon type="delete"></Icon>Tab 3</span>} key="3">Content of Tab Pane 3</TabPane>
          </Tabs>
        </Card>

        <Card title="tab带图的页签" className="card_wrapper">
          <Tabs 
            activeKey={this.state.activeKey}
            onChange={this.onChanges} 
            type="editable-card"
            onEdit={this.onEdit}
          >
            {
              this.state.panes.map((panel)=>{
                return <TabPane tab={panel.title} key={panel.key} >{panel.content}</TabPane>
              })
            }
          </Tabs>
        </Card>
      </div>
    )
  }
}